import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

const isLoading = false;
// 函数的本质上也是一个对象，所以不能直接渲染
function loadData() {
  if (isLoading) {
    return <h1>加载中...</h1>;
  } else {
    return false;
  }
}

// 列表数据
const list = ['香蕉', '苹果', '橘子', '西瓜', '葡萄'];
// 抽离写法
const ulNode = (
  <ul>
    {list.map((item) => {
      return <li key={item}>{item}</li>;
    })}
  </ul>
);

const divNode = (
  <div>
    <h3>{loadData()}</h3>
    <h3>{isLoading ? <h1>加载中...</h1> : <h1>加载完成</h1>}</h3>

    {/* forEach和map!使用map循环数组 */}
    {/* 列表渲染 */}
    {/* key口诀：有ID就用ID，没有ID就用索引 */}
    <ul>
      {list.map((item) => {
        return <li key={item}>{item}</li>;
      })}
    </ul>

    {ulNode}
  </div>
);

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(divNode);
